<template>
  <div class="c-select-test">
    <h3>CSelect 组件测试</h3>

    <div class="test-section">
      <h4>基本用法</h4>
      <CSelect :show-old-value="true" old-value="1" v-model="basicValue" :options="basicOptions" />
      <div class="selected-value">选中值: {{ basicValue }}</div>
    </div>

    <div class="test-section">
      <h4>带必填标记</h4>
      <CSelect
        style="width: 200px"
        old-value="1"
        v-model="requiredValue"
        :options="basicOptions"
        placeholder="请选择一项（必填）"
        show-required-mark
      />
    </div>

    <div class="test-section">
      <h4>禁用状态</h4>
      <CSelect v-model="disabledValue" :options="basicOptions" placeholder="禁用状态" disabled />
    </div>

    <div class="test-section">
      <h4>可筛选</h4>
      <CSelect v-model="filterValue" :options="basicOptions" placeholder="可筛选选项" filterable />
    </div>

    <div class="test-section">
      <h4>自定义字段名</h4>
      <CSelect
        v-model="customFieldValue"
        :options="customFieldOptions"
        placeholder="自定义字段名"
        value-key="id"
        label-key="name"
      />
    </div>

    <div class="test-section">
      <h4>自定义空提示</h4>
      <CSelect
        v-model="emptyValue"
        :options="[]"
        placeholder="暂无数据"
        empty-text="暂无选项数据"
        no-data-text="没有找到匹配项"
      />
    </div>

    <div class="test-section">
      <h4>远程搜索</h4>
      <CSelect
        v-model="remoteValue"
        :options="remoteOptions"
        placeholder="远程搜索..."
        filterable
        remote
        :remote-method="handleRemoteSearch"
      />
      <button @click="clearRemoteData">清除远程数据</button>
    </div>

    <div class="test-section">
      <h4>自定义选项渲染</h4>
      <CSelect
        v-model="customRenderValue"
        :options="customRenderOptions"
        placeholder="自定义选项渲染"
        option-render
      >
        <template #optionRender="{ option }">
          <div class="custom-option">
            <div class="option-icon">{{ option?.label?.charAt(0) }}</div>
            <div class="option-info">
              <div class="option-label">{{ option?.label }}</div>
              <div class="option-desc">ID: {{ option?.value }}</div>
            </div>
          </div>
        </template>
      </CSelect>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CSelect from '../CSelect/CSelect.vue'

// 基本用法数据
const basicValue = ref('5')
const basicOptions = ref([
  { value: '1', label: '选项一', isvalid: '1' },
  { value: '2', label: '选项二', isvalid: '1' },
  { value: '3', label: '选项三', isvalid: '1' },
  { value: '4', label: '选项四', isvalid: '1' },
  { value: '5', label: '选项五', isvalid: '0' },
])

// 必填标记测试
const requiredValue = ref('')

// 禁用状态测试
const disabledValue = ref('')

// 可筛选测试
const filterValue = ref('')

// 自定义字段名测试
const customFieldValue = ref('')
const customFieldOptions = ref([
  { id: '101', name: '张三' },
  { id: '102', name: '李四' },
  { id: '103', name: '王五' },
])

// 空数据测试
const emptyValue = ref('')

// 远程搜索测试
const remoteValue = ref('')
const remoteOptions = ref<any[]>([])
const handleRemoteSearch = async (query: string) => {
  // 模拟远程请求延迟
  await new Promise((resolve) => setTimeout(resolve, 500))

  if (query) {
    // 模拟搜索结果
    const mockResults = [
      { value: `remote-${query}-1`, label: `远程选项 ${query}-1` },
      { value: `remote-${query}-2`, label: `远程选项 ${query}-2` },
      { value: `remote-${query}-3`, label: `远程选项 ${query}-3` },
    ]
    remoteOptions.value = mockResults
  } else {
    remoteOptions.value = []
  }
}

const clearRemoteData = () => {
  remoteOptions.value = []
  remoteValue.value = ''
}

// 自定义选项渲染测试
const customRenderValue = ref('')
const customRenderOptions = ref([
  { value: '201', label: '产品A', desc: '这是产品A的描述' },
  { value: '202', label: '产品B', desc: '这是产品B的描述' },
  { value: '203', label: '产品C', desc: '这是产品C的描述' },
])
</script>

<style lang="scss" scoped>
.c-select-test {
  overflow: auto;
  height: 100%;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
}

h4 {
  margin-bottom: 10px;
  color: #666;
  font-size: 16px;
}

.test-section {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.selected-value {
  margin-top: 10px;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
}

button {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: #5a6268;
  }
}

// 自定义选项样式
.custom-option {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.option-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
}

.option-info {
  flex: 1;
}

.option-label {
  font-weight: 500;
}

.option-desc {
  font-size: 12px;
  color: #909399;
}
</style>
